<template>
  <div class="footer">
    <ul>
      <li><router-link to="/welcome">首页</router-link></li>
      <li><router-link to="/manage">人员管理</router-link></li>
      <li><router-link to="/layout">layout</router-link></li>
      <li><router-link to="/container">container</router-link></li>
    </ul>
  </div>
</template>
<style scoped>
li a {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

ul {
  display: flex;
  height: 100%;
  line-height: 50px;
}
ul li {
  flex: 1;
  flex-direction: row;
  background: color #f1f1f1;
}
.isIndex li:first-child {
  background-color: #67C23A;
  
}
.isIndex li:first-child a {
  color:#fff
}
.isManage li:nth-child(2) {
  background-color: #67C23A;
}
.isManage li:nth-child(2) a {
  color:#fff
}

.isLayout li:nth-child(3) {
  background-color: #67C23A;
}
.isLayout li:nth-child(3) a {
color:#fff
}
.iscontainer li:nth-child(4) {
  background-color: #67C23A;
}
.iscontainer li:nth-child(4) a {
 color:#fff
}

/* .isLayout li:last-child {
  background-color: #d3d3d3;
}
.isLayout li:last-child a {
  color: #41b883;
} */

.footer {
  width: 100%;
  height: 100%;
  bottom: 0;
}
</style>